<template>
  <div class="pay-container">
    <div class="header">
      <span class="title">确认订单</span>
    </div>

    <div class="pay-panel">
      <div class="pay-title">
        <img v-if="method==='alipay'" class="logo" src="https://gw.alipayobjects.com/mdn/rms_b5fcc8/afts/img/A*mR2cQb0oJj0AAAAAAAAAAAAAARQnAQ" alt="支付宝">
        <img v-else class="logo" src="https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.png" alt="微信">
        <span>{{ methodText }}付款</span>
      </div>
      <div class="amount">¥ {{ amount }}</div>
      <div class="detail">
        <div class="row"><span>订单金额</span><span>¥ {{ amount }}</span></div>
        <div class="row"><span>订单信息</span><span>电商购物</span></div>
        <div class="row"><span>付款方式</span><span>{{ method==='alipay' ? '花呗' : '余额/银行卡' }}</span></div>
      </div>
      <button class="pay-btn" @click="handlePay">立即付款</button>
    </div>
    
    <!-- 支付宝支付iframe -->
    <div v-if="showAlipayForm" class="alipay-form-container">
      <div v-html="alipayForm"></div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const amount = computed(() => route.query.amount || '0.00')
const method = computed(() => (route.query.method || 'alipay'))
const methodText = computed(() => method.value === 'alipay' ? '支付宝' : '微信')

const showAlipayForm = ref(false)
const alipayForm = ref('')

// 处理支付
const handlePay = async () => {
  if (method.value === 'alipay') {
    // 调用后端支付宝支付接口
    await alipay()
  } else {
    // 微信支付或其他支付方式
    fakePay()
  }
}

// 支付宝支付
const alipay = async () => {
  try {
    const orderNo = route.query.orderNo
    if (!orderNo) {
      alert('订单号不能为空')
      return
    }
    
    // 调用后端支付宝支付接口
    const response = await fetch(`/api/payment/alipay/${orderNo}`, {
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`  // 假设token存储在localStorage中
      }
    })
    const data = await response.json()
    
    if (data.code === 200) {
      // 直接使用后端返回的完整支付URL进行跳转（推荐方式）
      // 后端已经包含了正确的网关地址和所有参数
      window.location.href = data.url
    } else {
      alert('支付失败: ' + (data.detail || '未知错误'))
    }
  } catch (error) {
    console.error('支付请求失败:', error)
    alert('支付请求失败，请稍后重试')
  }
}

const fakePay = () => {
  alert(`${methodText.value}支付成功，金额 ¥${amount.value}`)
  router.replace('/orders')
}
</script>

<style scoped>
.pay-container { width:100vw; min-height:100vh; background:#f7f7f7; }
.header { position:sticky; top:0; background:#fff; padding:12px; border-bottom:1px solid #eee; text-align:center; }
.title { font-weight:700; }
.pay-panel { margin:12px; background:#fff; border-radius:12px; border:1px solid #eee; padding:16px; }
.pay-title { display:flex; align-items:center; gap:8px; font-weight:700; }
.logo { width:22px; height:22px; }
.amount { text-align:center; font-size:34px; font-weight:800; margin:16px 0; }
.detail { border:1px solid #f0f0f0; border-radius:8px; overflow:hidden; }
.row { display:flex; justify-content:space-between; padding:10px 12px; border-top:1px solid #f6f6f6; }
.row:first-child { border-top:none; }
.pay-btn { width:100%; margin-top:16px; background:#2d8cf0; color:#fff; border:none; border-radius:8px; padding:12px 0; font-size:16px; font-weight:700; }

.alipay-form-container {
  display: none;
}
</style>